import { styled } from '@umijs/max'

interface RadioButton2Props<T> {
  items: {label: string, value: T}[]
  value: T
  onChange: (value: T) => void
}

const Container = styled.div`
  width: min-content;
  height: 32px;
  display: flex;

  .active {
    color: var(--ant-color-primary);
    border: 1px solid var(--ant-color-primary) !important;

    &::before {
      content: unset;
    }
  }
`

const Button = styled.div`
  width: max-content;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--ant-diy-border-color);
  border-left: 0;
  border-right: 0;
  font-size: 12px;
  color: var(--ant-diy-text-color);
  cursor: pointer;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: 0;
    height: 18px;
    top: 7px;
    left: 0;
    border-left: 1px solid var(--ant-diy-border-color);
  }

  &:first-child {
    border-left: 1px solid var(--ant-diy-border-color);

    &::before {
      content: unset;
    }
  }

  .active + & {
    border-left: 0;

    &::before {
      content: unset;
    }
  }

  &:last-child {
    border-right: 1px solid var(--ant-diy-border-color);
  }
`

function RadioButton2<T = string>(props: RadioButton2Props<T>) {
  return (
    <Container>
      {
        props.items.map(item => (
          <Button
            key={item.value as string} 
            onClick={() => props.onChange(item.value)}
            className={item.value === props.value ? 'active' : ''}
          >
            { item.label }
          </Button>
        ))
      }
    </Container>
  )
}

export default RadioButton2